<template>
  <div>
    <List>
      <ListItem
        v-for="album in albumsList"
        :key="`album-${album.id}`"
      >
        <ListItemMeta
          :avatar="fullUrl(album.coverImage)"
        >
          <router-link
            slot="title"
            :to="{ name: 'LibraryAlbum', params: { albumId: album.id } }"
          >
            {{ album.title }}
          </router-link>
        </ListItemMeta>
      </ListItem>
    </List>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { Album, getAlbums } from '@/api/resources'
import { cdn } from '@/utils'

@Component({
  name: 'AlbumsList'
})
export default class extends Vue {
  @Prop() userId!: number
  private albumsList: Partial<Album>[] = []

  get params (): CreateQueryParams {
    return {
      fields: ['id', 'title', 'coverImage'],
      search: {
        'favByUsers.id': this.userId
      },
      join: [{
        field: 'favByUsers'
      }]
    }
  }

  private fullUrl = cdn

  mounted () {
    this.updateData()
  }

  @Watch('userId')
  private handleUserIdUpdated () {
    this.updateData()
  }

  private async updateData () {
    const { data } = await getAlbums(this.params)
    this.albumsList = data
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

</style>
